<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--问题描述：块之间有空格-->
<!--如果多个span连续编写，像这样：-->
<style>
    .s{border-bottom: gray 2px solid;}
</style>

<span class="s">连续的span</span><span class="s">连续的span</span>
<!--是不会有空格的
但是真正开发代码的时候，一般不会连续书写span,而是不同的span之间有回车换行，比如这样：-->
<span class="s">有换行的span</span>
<span class="s">有换行的span</span>
<span class="s">有换行的span</span>
<!--而这样编写代码，就会导致<span>之间出现空格-->

<!--解决办法-->
<!--使用float来解决。
float使用完毕之后，记得在下面加上 <div style="clear:both"></div> 
用于使得后续的元素，不会和这些span重复在一起-->
<style>
    .s{
        float: left;
    }
</style>

<span class="s">有换行的span</span>
<span class="s">有换行的span</span>
<span class="s">有换行的span</span>
<div style="clear: both">后续元素</div>
</body>
</html>